<template>
  <div class='search-component' v-show="show.show">
    <div class='search-header'>
      <div class='close' @click="closeSearch"></div>
      <div class='search-wrap'>
        <div class='search-input-wrap'>
          <input type="text" class='search' placeholder="请输入宝贝名称" v-model="keyword"/>
        </div>
        <button type="button" class='search-btn' @click="goSearch()"></button>
      </div>
    </div>
    <div class='search-main' v-if="historyKeywords.length>0">
      <div class='search-title-wrap'>
        <div class='search-title'>最近搜索</div>
        <div class='bin' @click="clearHistoryKeywords"></div>
      </div>
      <div class='search-keywords-wrap'>
        <div class='keywords' v-for="(item,index) in historyKeywords" :key="index" @click="goSearch(item)">{{item}}
        </div>
      </div>
    </div>
    <div class='search-main'>
      <div class='search-title-wrap'>
        <div class='search-title'>热门搜索</div>
      </div>
      <div class='search-keywords-wrap'>
        <div class='keywords' v-for="(item,index) in hotKeywords" :key="index" @click="goSearch(item.title)">
          {{item.title}}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
// import { Dialog } from 'vant'
import { hotwordsData } from 'api/search'

export default {
  name: 'MySearch',
  props: {
    show: {
      type: Object,
      default: () => {
        return { show: false }
      }
    },
    isLocal: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      keyword: '',
      hotKeywords: []
    }
  },
  computed: {
    ...mapState({
      historyKeywords: (state) => state.search.historyKeywords
    })
  },
  watch: {
    show: {
      handler (val) {
        if (!val.show) {
          document.documentElement.style.height = 'auto'
          document.body.style.height = 'auto'
          document.body.style.overflow = 'auto'
        } else {
          document.documentElement.style.height = '100%'
          document.body.style.height = '100%'
          document.body.style.overflow = 'hidden'
        }
      },
      deep: true //true 深度监听
    },
  },
  methods: {
    ...mapMutations({
      setHistoryKeywords: 'search/SET_HISTORY_KEYWORDS',
      clearHistory: 'search/CLEAR_HISTORY_KEYWORDS'
    }),
    goSearch (keyword = '') {
      let tmpKeyword = this.keyword.trim() || keyword
      if (tmpKeyword === '') {
        return false
      }
      this.historyKeywords.forEach((item, index) => {
        if (item === tmpKeyword) {
          this.historyKeywords.splice(index, 1)
        }
      })
      this.historyKeywords.unshift(tmpKeyword)
      if (this.historyKeywords.length > 9) {
        this.historyKeywords.splice(-1, this.historyKeywords.length - 9)
      }
      this.setHistoryKeywords({ historyKeywords: this.historyKeywords })
      this.show.show = false
      // this.$router.push(`/goods/search?keyword=${tmpKeyword}`)
      if (this.isLocal) {
        this.$router.replace({
          name: 'goods-search',
          query: { 'keyword': tmpKeyword }
        })
      } else {
        this.$router.push({
          name: 'goods-search',
          query: { 'keyword': tmpKeyword }
        })
      }
    },
    clearHistoryKeywords () {
      this.$dialog.confirm({
        message: '确定要删除吗？'
      }).then(() => {
        this.clearHistory()
      })
        .catch(() => {

        })
      // Dialog.confirm({
      //   message: '确定要删除吗？',
      // })
      //   .then(() => {
      //     this.clearHistory()
      //   })
      //   .catch(() => {
      //
      //   })
    },
    closeSearch () {
      this.show.show = false
    }
  },
  created () {
    hotwordsData().then(res => {
      if (res.code === 200) {
        this.hotKeywords = res.data
      }
    })
  }
}
</script>

<style scoped>
  .search-component {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 99;
    left: 0px;
    top: 0px;
    background-color: #ffffff;
  }

  .search-component .search-header {
    width: 100%;
    height: 1rem;
    border-bottom: #EFEFEF solid 1px;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
  }

  .search-component .search-header .close {
    width: 0.5rem;
    height: 0.5rem;
    background-image: url("../../assets/images/common/search_x.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 0.2rem;
    margin-right: 0.2rem;
  }

  .search-component .search-header .search-wrap {
    width: 78%;
    height: 0.64rem;
    border: #B2B2B2 solid 1px;
    border-radius: 0.1rem;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
  }

  .search-component .search-header .search-wrap .search-input-wrap {
    width: 85%;
    height: 100%;
    border-right: #B2B2B2 solid 1px;
  }

  .search-component .search-header .search-wrap .search {
    width: 80%;
    height: 93%;
    margin-left: 0.2rem;
    font-size: 0.28rem;
  }

  .search-component .search-header .search-wrap .search-btn {
    width: 0.5rem;
    height: 0.5rem;
    background-image: url("../../assets/images/common/search_icon.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ffffff;
    border: 0px none;
    outline: none;
    margin-left: 0.15rem;
  }

  .search-component .search-main {
    width: 100%;
    margin-top: 0.2rem;
  }

  .search-component .search-main .search-title-wrap {
    width: auto;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }

  .search-component .search-main .search-title-wrap .search-title {
    width: auto;
    font-size: 0.28rem;
  }

  .search-component .search-main .search-title-wrap .bin {
    width: 0.4rem;
    height: 0.4rem;
    background-image: url('../../assets/images/common/bin.png');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
  }

  .search-component .search-main .search-keywords-wrap {
    width: auto;
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    margin-top: 0.3rem;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
  }

  .search-component .search-main .search-keywords-wrap .keywords {
    width: 26%;
    height: 0.6rem;
    color: #717376;
    border: #EFEFEF solid 1px;
    border-radius: 0.64rem;
    font-size: 0.28rem;
    text-align: center;
    overflow: hidden;
    line-height: 0.6rem;
    margin-right: 1.3%;
    margin-left: 1.3%;
    margin-bottom: 0.2rem;
    padding-left: 0.1rem;
    padding-right: 0.1rem;
  }
</style>
